<template>
  <div class="hello">
     <div id="chart1"></div>
    <div id="pie"></div>
    <div id="zhe"></div>
  </div>
</template>

<script>
export default {
  name: "two",
  data() {
    return {
      ws:null,
      url:"http://127.0.0.1:9209/websocket/server",
      barChart:null,
      pieChart:null,
      zheChart:null,
      userId:null,
    }
  }, methods: {
    zhe(data){
      if(!this.zheChart){
        this.zheChart=this.$echarts.init(document.getElementById('zhe'))
      }
      var zheChart = this.zheChart;
    const  option = {
      tooltip: {
        //trigger: 'axis' 表示通过坐标轴触发显示提示信息，axisPointer: { type: 'shadow' } 表示使用阴影作为坐标轴指示器的样式。
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
        xAxis:[
          {
            axisLabel: {
              textStyle: {
                color: 'white'  // 设置 x 轴字体颜色为白色
              }
            },
            type: 'category',
            data: data.dictLabelList,
            axisTick: {
              alignWithLabel: true
            }
          },
        ] ,
        yAxis:[
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: 'white'  // 设置 y 轴字体颜色为白色
              }
            }
          }
        ],
        series: [
          {
            name: 'Direct',
            barWidth: '60%',
            data: data.countList,
            type: 'line'
          }
        ]
      };
      zheChart.setOption(option);
    },
    initChart(data){
      if(!this.barChart){
        this.barChart=this.$echarts.init(document.getElementById('chart1'))
      }
      var barChart = this.barChart;
    const  option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                color: 'white'  // 设置 x 轴字体颜色为白色
              }
            },
            type: 'category',
            data: data.dictLabelList,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: 'white'  // 设置 y 轴字体颜色为白色
              }
            }
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: data.countList
          }
        ]
      };
      barChart.setOption(option);
    },
    init(){
      var urlParams2 = this.getUrlParams2(window.location.href);
      this.ws= new WebSocket(this.url);
      this.ws.onopen=this.websocketOnOpen;
      this.ws.onmessage=this.websocketOnMessage;
    },
    websocketOnOpen(){
      console.log("连接成功");
    },
    websocketOnMessage(datas) {
      console.log(datas);
      var parse = JSON.parse(datas.data);
      this.initChart(JSON.parse(datas.data).server);
      this.initPie(JSON.parse(datas.data).pie)
      this.zhe(JSON.parse(datas.data).server)
    },
    getUrlParams2(url) {
      var splitElement = url.split('?')[1];
      var urlSearchParams = new URLSearchParams(splitElement);
      var strings = Object.fromEntries(urlSearchParams.entries());
      return strings;
    },
    initPie(pies){
      console.log(JSON.stringify(pies))
      pies= pies.map(item=>{
        return {
          name:item.dictLabel,
          value:item.countCrop
        };
      });
      if(!this.pieChart){
        this.pieChart=this.$echarts.init(document.getElementById('pie'))
      }
      var pieChart = this.pieChart;
      const  option={
        title: {
          text: '农作物数量统计图',
          textStyle: {
            color: 'white'  // 设置标题颜色为白色
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          textStyle: {
            color: 'white'  // 设置图例文本颜色为白色
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: pies,
            /*data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],*/
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 3.5 将配置参数和图表关联
      pieChart.setOption(option);
    }
  }, created() {
  },
  mounted() {
    this.init()
  }
}
</script>
<style scoped lang="scss">
.hello{
  display: flex;
  #chart1,#pie,#zhe{
    width: 600px;
    height: 400px;
    background-color: black;
  }
  #pie{
    margin-left: 20px;
  }
  #zhe{
    margin-left: 20px;
  }
}
</style>
